<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息 - Spring Security SSO</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 2rem 0;
        }
        .main-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .user-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 3rem;
            margin-bottom: 2rem;
        }
        .header-section {
            text-align: center;
            margin-bottom: 3rem;
        }
        .user-avatar {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 3rem;
            color: white;
        }
        .info-card {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-radius: 0 10px 10px 0;
        }
        .role-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            margin: 0.25rem;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .role-super {
            background: linear-gradient(45deg, #dc3545, #c82333);
            color: white;
        }
        .role-user {
            background: linear-gradient(45deg, #ffc107, #e0a800);
            color: #212529;
        }
        .role-default {
            background: linear-gradient(45deg, #6c757d, #545b62);
            color: white;
        }
        .action-buttons {
            text-align: center;
            margin-top: 2rem;
        }
        .action-buttons .btn {
            margin: 0.5rem;
            border-radius: 25px;
            padding: 12px 25px;
            font-weight: 500;
        }
        .breadcrumb-nav {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 2rem;
        }
        .breadcrumb {
            background: none;
            margin-bottom: 0;
        }
        .breadcrumb-item a {
            color: white;
            text-decoration: none;
        }
        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>

<body>
    <div class="main-container">
        <!-- 导航面包屑 -->
        <nav class="breadcrumb-nav">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="/">
                        <i class="fas fa-home me-1"></i>
                        首页
                    </a>
                </li>
                <li class="breadcrumb-item active">
                    <i class="fas fa-user me-1"></i>
                    用户信息
                </li>
            </ol>
        </nav>

        <!-- 用户信息卡片 -->
        <div class="user-card">
            <div class="header-section">
                <div class="user-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <h1 class="mb-3">用户详细信息</h1>
                <p class="text-muted">您的账户信息和权限详情</p>
            </div>

            <!-- 基本信息 -->
            <div class="info-card">
                <h5 class="mb-3">
                    <i class="fas fa-id-card me-2 text-primary"></i>
                    基本信息
                </h5>
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-2">
                            <strong>用户名:</strong>
                            <span th:text="${#authentication.name}" class="text-primary ms-2">用户名</span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-2">
                            <strong>认证状态:</strong>
                            <span class="badge bg-success ms-2">
                                <i class="fas fa-check-circle me-1"></i>
                                已认证
                            </span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 权限信息 -->
            <div class="info-card">
                <h5 class="mb-3">
                    <i class="fas fa-shield-alt me-2 text-warning"></i>
                    权限信息
                </h5>
                <p class="mb-3"><strong>当前权限:</strong></p>
                
                <!-- 权限显示 -->
                <div sec:authorize="hasAnyAuthority('ROLE_SUPER')" class="mb-3">
                    <span class="role-badge role-super">
                        <i class="fas fa-crown me-1"></i>
                        超级管理员
                    </span>
                    <small class="text-muted d-block mt-2">
                        拥有系统最高权限，可以管理所有资源和用户
                    </small>
                </div>

                <div sec:authorize="hasAnyAuthority('ROLE_USER')" class="mb-3">
                    <span class="role-badge role-user">
                        <i class="fas fa-user me-1"></i>
                        普通用户
                    </span>
                    <small class="text-muted d-block mt-2">
                        拥有基本的用户权限，可以访问个人资源
                    </small>
                </div>

                <!-- 显示所有权限 -->
                <div class="mt-3">
                    <p class="mb-2"><strong>详细权限列表:</strong></p>
                    <div class="bg-light p-3 rounded">
                        <code th:text="${#authentication.authorities}">权限列表</code>
                    </div>
                </div>
            </div>

            <!-- 会话信息 -->
            <div class="info-card">
                <h5 class="mb-3">
                    <i class="fas fa-clock me-2 text-info"></i>
                    会话信息
                </h5>
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-2">
                            <strong>认证方式:</strong>
                            <span class="badge bg-info ms-2">OAuth2</span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-2">
                            <strong>会话状态:</strong>
                            <span class="badge bg-success ms-2">活跃</span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <a href="/" class="btn btn-outline-primary">
                    <i class="fas fa-home me-2"></i>
                    返回首页
                </a>
                <a href="/resource" class="btn btn-success">
                    <i class="fas fa-database me-2"></i>
                    访问资源
                </a>
                <button class="btn btn-info" onclick="refreshUserInfo()">
                    <i class="fas fa-sync-alt me-2"></i>
                    刷新信息
                </button>
                <a href="/logout" class="btn btn-outline-danger">
                    <i class="fas fa-sign-out-alt me-2"></i>
                    安全退出
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        // 页面加载动画
        $(document).ready(function() {
            $('.user-card').hide().fadeIn(800);
        });

        // 刷新用户信息
        function refreshUserInfo() {
            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>刷新中...';
            btn.disabled = true;
            
            setTimeout(() => {
                location.reload();
            }, 1000);
        }

        // 添加一些交互效果
        $('.info-card').hover(
            function() {
                $(this).css('transform', 'translateX(5px)');
            },
            function() {
                $(this).css('transform', 'translateX(0)');
            }
        );
    </script>
</body>
</html>
